<template>
  <div>

    <van-nav-bar title="订单详情"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />

    <div class="near-box">

      <div class="jd-qrdd-bigbox">
        <!--商品地址管理部分-->
        <div class="indent-details-box">
          <span class="indent-details-img1"></span>
          <span class="indent-details-text1">已发货</span>
          <span class="indent-details-text2">物流信息：客户签收人：邮件收发 已签收 感谢使用圆通快递，期待再次为您服务！</span>
          <span class="indent-details-text3">2017-10-23 12:25:12</span>
        </div>
        <!--地址部分-->
        <div class="jd-qrdd-a1">
          <span class="qrdd-a1-t1">{{address.consignee}}</span>
          <span class="qrdd-a1-t1">{{address.mobile}}</span>
          <span class="qrdd-a1-t2"
                v-if="address.status == 1">默认</span>
          <div class="qrdd-a1-b1">
            <span class="qrdd-a1-img1"></span>
            <span class="qrdd-a1-t3">{{address.provinces.name}} {{address.citys.name}} {{address.districts.name}} {{address.address}}</span>
          </div>
          <span class="qrdd-a1-img2"></span>
        </div>
        <!--商品部分-->
        <div class="zjzz-buylist-goods1">
          <!-- <div class="zjzz-buylist-gtime">
                    <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i>{{order.code}}</span>
                    <span class="zjzz-buylist-gtime2">联系客服</span>
                </div> -->
          <div class="zjzz-buylist-det"
               v-for="item of OrderProduct"
               :key="item.id">
            <img :src="item.product.cover_cdn" />
            <div class="zjzz-buylist-gdetail">
              <span class="zjzz-buylist-gtit1">{{item.product.name}}</span>
              <span class="zjzz-buylist-gmoney">
                <i class="zjzz-buylist-gm1">￥{{item.total}}</i>
                <i class="zjzz-buylist-gm2">x{{item.nums}}</i>
              </span>
            </div>
          </div>
          <div class="zjzz-buylist-btn">
            <a class="zjzz-buylist-btn3">申请售后</a>
          </div>
        </div>
        <!--商品金额部分-->
        <div class="indent-details-box2">
          <span class="indent-details-text4">应付总额</span>
          <span class="indent-details-text5">￥{{order.total}}</span>
        </div>
        <div class="indent-details-box2">
          <span class="indent-details-text4 tcolor-grey">商品总价</span>
          <span class="indent-details-text5 tcolor-black">￥{{order.total}}</span>
        </div>
        <div class="indent-details-box2">
          <span class="indent-details-text4 tcolor-grey">运费</span>
          <span class="indent-details-text5 tcolor-black">￥0.00</span>
        </div>
        <div class="indent-details-box2">
          <span class="indent-details-text4 tcolor-grey">税费</span>
          <span class="indent-details-text5 tcolor-black">￥0.00</span>
        </div>
        <div class="indent-details-box2">
          <span class="indent-details-text4 tcolor-grey">发票信息</span>
          <span class="indent-details-text5 tcolor-black">不需要发票</span>
        </div>
        <!--订单编号部分-->
        <div class="indent-details-box3">
          <p>订单编号:{{order.code}}</p>
          <!-- <p>支付方式:支付宝</p>
                <p>支付交易单号:201711024866544846144</p> -->
          <p>下单时间:{{order.createtime}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    let orderid = this.$route.query.orderid

    if (!orderid) {
      this.$notify({
        type: 'danger',
        message: '订单不存在，请重新选择',
        duration: 1500,
      })
      this.$router.push('/order/order/index')
      return false
    }

    this.orderid = orderid

    this.Order()
  },
  data() {
    return {
      orderid: 0,
      LoginUser: this.$cookies.get('LoginUser'),
      order: {},
      OrderProduct: [],
      address: {
        provinces: {},
        citys: {},
        districts: {},
      },
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/order/order/index')
    },
    async Order() {
      let data = {
        userid: this.LoginUser.id,
        orderid: this.orderid,
      }

      let result = await this.$api.OrderInfo(data)

      if (result.code === 0) {
        this.$notify({
          type: 'danger',
          message: result.msg,
          duration: 1500,
        })
        this.$router.push('/order/order/index')
        return false
      }

      this.order = result.data.order
      this.OrderProduct = result.data.OrderProduct
      this.address = result.data.address
    },
  },
}
</script>
<style>
@import url('/assets/css/indent-details.css');
</style>